<template>
  <div class="yxp">
    <div class="yxp-wordList-top">
      <div class="back" id="yxp-after-back"  @click="handleBack">
        <span></span>
      </div>
      <span class="yxp-top-c">学后检测</span>
      <div class="yxp-top-r">
        <div class="text">总数<em>{{dataList.length}}</em></div>
        <div class="line"></div>
        <div class="text">错误<em v-if="!isError">{{errorNum}}</em><em v-else>{{errorNum}}</em></div>
        <div class="line"></div>
        <div class="text">正确率<em v-if="!isError">100%</em><em v-else>{{(successNum / dataList.length * 100).toFixed(2) + '%'}}</em></div>
        <div class="btn" id="yxp-after-submit" @click="handleSubmit">提交</div>
      </div>
    </div>
<!--     
    <div class="yxp-wordList-top">
      <div class="back" @click="handleBack"></div>
      <span class="yxp-top-c">学后检测</span>
      <div class="yxp-top-r">
        <div class="text">
          总数<em>{{ dataList.length }}</em>
        </div>
        <div class="line"></div>
        <div class="text">
          错误<em v-if="!isError">{{ errorNum }}</em
          ><em v-else>{{ errorNum }}</em>
        </div>
        <div class="line"></div>
        <div class="text">
          正确率<em v-if="!isError">100%</em
          ><em v-else>{{
            ((successNum / dataList.length) * 100).toFixed(2) + "%"
          }}</em>
        </div>
        <div class="btn" @click="handleSubmit">提交</div>
      </div>
    </div> -->
    <Study :data="dataList" @check="handleCheckResult" />
    <div class="mark" v-if="isPop"></div>
    <div class="yxp-wordList-pop" v-if="isPop">
      <div class="close" id="yxp-after-close" @click="handleReset"></div>
      <p class="tips">是否放弃检测</p>
      <div class="btn">
        <span class="btn-item" id="yxp-after-sure" @click="handleSure">确定</span>
        <span class="btn-item" id="yxp-after-reset" @click="handleReset">取消</span>
      </div>
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import Study from "@/components/Study.vue";
import { readUpword } from "@/services/super-read";
import storage from '@/utils/storage.js'
import Timetips from "@/components/Timetips";
const completePng = require("assets/super-read/word-complete.png");
export default {
  name: "afterStudy",
  components: {
    Study,
    Timetips
  },
  data() {
    return {
      id: 0,
      type: 0,
      modal: 0,
      successNum: 0,
      errorNum: 0,
      tips: "",
      isPop: false,
      canArr: [],
      canNotArr: [],
      canWord: [],
      canNotWord: [],
      dataList: [],
      isError: false,
      course_type: 0,
    };
  },
  destroyed () {
    delete window.__LIMIT_TIME__
  },
  created() {
    console.log(this.$route.query)
    window.__LIMIT_TIME__ = -1
    let { id, type, modal } = this.$route.query
    this.id = id
    this.type = type
    this.modal = +modal
    let data = storage.get('paperData')
    let arr = []
    data.map(item => {
      if (item.isEnd) {
        item.data.map(elem => {
          arr.push(elem)
        })
      }
    })
    arr.map(item => {
      item.num = 0
      item.isSuccess = false
      item.isError = false
    })
    this.dataList = arr
    this.successNum = this.dataList.length
  },
  methods: {
    handleCheckResult(val) {
      this.isError = true;
      console.log(val)
      if (val.type === 1) {
        if (this.canArr.indexOf(val.id) === -1) {
          this.canArr.push(val.word);
        }
        if (this.canNotArr.indexOf(val.word) > -1) {
          this.errorNum--;
          this.successNum = this.dataList.length - this.errorNum;
          let index = this.canNotArr.indexOf(val.word);
          this.canNotArr.splice(index, 1);
        }
      } else if (val.type === 0) {
        this.errorNum++;
        this.successNum = this.dataList.length - this.errorNum;
        if (this.errorNum > this.dataList.length)
          this.errorNum = this.dataList.length;
        this.successNum = this.dataList.length - this.errorNum;
        if (this.canNotArr.indexOf(val.id) === -1) {
          console.log('1112333')
          this.canNotArr.push(val.word);
        }
        if (this.canArr.indexOf(val.id) > -1) {
          let index = this.canArr.indexOf(val.word);
          this.canArr.splice(index, 1);
        }
      }
    },
    handleSubmit() {
      if (this.modal === 1) {
        if (this.canArr.length + this.canNotArr.length < this.dataList.length) {
          this.$toast("单词还没有检测完，不能提交哦~");
          return;
        }
        let params = {
          can: storage.get("canArr").join(","),
          can_not: this.canArr.join(","),
          difficult: this.canNotArr.join(","),
          question_type: this.$route.query.type,
          question_id: this.$route.query.id,
        };
        this.$loading.show();
        readUpword(params).then((res) => {
          if (res.code === 1) {
            this.$loading.hide();
            this.$yxpConfirm({
              msg: `<img width="223" style="margin: -20px 0;" src="${completePng}" alt=""/>
              <p>开始实战模拟训练吧~~</p>
              `,
              type: "alert",
              html: true,
              maskClosable: false,
              alertBtnText: "确定",
              closable: false
            })
              .then(() => {
                if (+this.modal === 1) {
                  let path = ''
                  if (+this.type === 6) {
                    path = '/super-read/pushblank'
                  } else if (+this.type === 1) {
                    path = '/super-read/pushword'
                  }
                  this.$router.replace({
                    path: path,
                    query: { ...this.$route.query },
                  });
                } else {
                  this.$router.go(-1)
                }
                // this.$router.replace({
                //   path: "/super-read/pushword",
                //   query: { ...this.$route.query },
                // });
              })
              .catch(() => {});
          } else {
            this.$loading.hide();
          }
        });
      } else {
        this.$router.go(-1)
        // let path = ''
        // if (this.modal === 1) {
        //   path = '/super-read/check-point'
        // } else if (this.modal === 2) {
        //   path = '/super-read/pushword'
        // } else if (this.modal === 3) {
        //   path = '/super-read/analysis'
        // }
        // console.log(path)
        // this.$router.push({
        //   path: path,
        //   query: { id: this.id, type: this.type },
        // });
      }
    },
    async handleSure() {
      this.$router.go(-1)
      // console.log('放弃检测' + '---' + this.modal)
      // let path = ''
      // if (this.modal === 1) {
      //   path = '/super-read/check-point'
      // } else if (this.modal === 2) {
      //   path = '/super-read/pushword'
      // } else if (this.modal === 3) {
      //   path = '/super-read/analysis'
      // }
      // console.log(path)
      // this.$router.push({
      //   path: path,
      //   query: { id: this.id, type: this.type },
      // });
    },
    handleReset() {
      this.isPop = false;
    },
    handleBack() {
      this.isPop = true;
    },
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
};
</script>
<style lang="less" scoped>
.yxp-wordList-top {
  .yxp-top-r {
    .text {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #666666;
      margin-left: 9px;
      margin-right: 9px;
      &:first-child {
        margin-left: 0;
      }
      em {
        margin-left: 10px;
      }
    }
    .line {
      width: 1px;
      height: 16px;
      background: #D6D6D6;
    }
    .btn {
      width: 140px;
      height: 46px;
      line-height: 46px;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background:linear-gradient(360deg,rgba(71,203,179,1) 0%,rgba(81,211,176,1) 100%);
      box-shadow:0px 5px 10px rgba(59,201,164,0.3);
      border-radius: 30px;
      cursor: pointer;
      &:hover {
        background:linear-gradient(360deg,rgba(39,178,152,1) 0%,rgba(52,203,163,1) 100%);
        box-shadow:0px 5px 10px rgba(59,201,164,0.3);
      }
    }
  }
}

@media screen and (max-width: 1200px) {
  .back {
    position: static !important;
  }
  .yxp-top-r {
    position: static !important;
  }
}

.yxp-wordList-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 360px;
  height: 270px;
  text-align: center;
  background: #fff;
  border-radius: 10px;
  .close {
    position: absolute;
    right: 20px;
    top: 15px;
    width: 20px;
    height: 20px;
    background: url(../../../assets/word/close-icon.png) no-repeat;
    background-size: 20px 20px;
    cursor: pointer;
    &:hover {
      background-image: url(../../../assets/word/close-hover.png);
    }
  }
  .tips {
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    padding-top: 96px;
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 53px;
    .btn-item {
      width: 130px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #fff;
      background: #27bfa3;
      border-radius: 100px;
      cursor: pointer;
      &:first-child {
        margin-right: 20px;
      }
      &:hover {
        background: #18a38a;
      }
    }
  }
}

</style>
